<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      select {
        width: 200px;
        height: 300px;
        font-size: 22px;
        background-color: #80ff45;
      }
    </style>
    <script src="./jquery-1.11.1.js"></script>
    <script>
      $(function () {
        $("button:first").click(function () {
          //   console.log($("#sel1 ").html());
          var content = $("#sel1 ").html();
          $("#sel1 ").html("");
          $("#sel2").append(content);
        });
        $("button:eq(1)").click(function () {
          //   console.log($("#sel1 ").html());
          var content = $("#sel2 ").html();
          $("#sel2 ").html("");
          $("#sel1").append(content);
        });
        $("button:eq(2)").click(function () {
          $("#sel2").append($("#sel1 option:selected"));
        });
        $("button:eq(3)").click(function () {
          $("#sel1").append($("#sel2 option:selected"));
        });
      });
    </script>
  </head>
  <body>
    <select name="" id="sel1" size="4" multiple>
      <option value="">香蕉</option>
      <option value="">大鸭梨</option>
      <option value="">苹果</option>
      <option value="">大西瓜</option>
    </select>

    <button>&gt;&gt;&gt;</button>
    <button>&lt;&lt;&lt;</button>
    <button>&gt;</button>
    <button>&lt;</button>

    <select name="" id="sel2" size="4" multiple></select>
  </body>
</html>
